<template>
  <el-col :md="0" :lg="0" :xl="0">
    <div @click=";(drawer = true), playMusicDrawer(event)" class="player">
      <el-icon :size="40">
        <message-box />
      </el-icon>
    </div>
  </el-col>
  <el-col :xs="0" :sm="0" :md="24" :lg="24" :xl="24">
    <div @click="drawer = true" class="big-player">
      <el-icon :size="40">
        <message-box />
      </el-icon>
      音乐抽屉
    </div>
  </el-col>
  <el-drawer
    ref="musicDrawerRef"
    v-model="drawer"
    size="70%"
    :append-to-body="true"
    :lock-scroll="true"
    :modal="true"
    :direction="direction"
    :with-header="false"
    :before-close="handleClose"
  >
    <!-- 音乐播放组件 -->
    <play-music />
  </el-drawer>
</template>

<script lang="ts">
import { defineComponent, onMounted, ref } from 'vue'
import PlayMusic from '../play-music/play-music.vue'

export default defineComponent({
  components: { PlayMusic },
  setup() {
    /* 控制抽屉是否打开 */
    const drawer = ref(true)
    /* 获取抽屉组件 */
    const musicDrawerRef = ref({
      drawerRef: HTMLDivElement
    })
    /* 抽屉组件内部组件为懒加载的
    而我的 play-music 需要加载才可以添加播放歌曲
    所以在当前页面挂载完毕后我先将抽屉内容组件设置为透明的加载一下然后关闭
    再回复透明度
    请问可以有更好的方法吗
    */
    onMounted(() => {
      const drawerEl: any = musicDrawerRef.value?.drawerRef
      drawerEl.style.opacity = 0.1
      drawer.value = false
      drawerEl.style.opacity = 1
    })
    /* 抽屉内容组件方向 ，下到上 */
    const direction = ref('btt')
    /* 抽屉按钮点击事件 */
    const playMusicDrawer = () => {
      drawer.value = true
      /* 锁定页面滚动条 --element drawer 的属性配置了没起作用，不清楚是哪儿出了问题 */
      document.body.style.overflowY = 'hidden'
    }
    /* 抽屉关闭前触发函数 */
    const handleClose = () => {
      drawer.value = false
      document.body.style.overflowY = 'auto'
    }
    return {
      drawer,
      musicDrawerRef,
      direction,
      handleClose,
      playMusicDrawer
    }
  }
})
</script>

<style scoped lang="less">
.player {
  position: fixed;
  right: 10px;
  bottom: 10%;
  z-index: 3000;
  border-bottom: none;
  background: rgba(178, 255, 229, 0.336);
  border-radius: 4px;
  display: inline-block;
  width: 40px;
  height: 40px;
  padding: 0;
}
.big-player {
  position: fixed;
  right: 0;
  bottom: 15%;
  z-index: 3000;
  border-bottom: none;
  border-radius: 60px 0 0 60px;
  box-shadow: 10px 4px 10px #ccc;
  background: rgba(255, 255, 255, 0.281);
  display: flex;
  width: 120px;
  height: 55px;
  justify-content: space-evenly;
  align-items: center;
  padding: 0;
  cursor: pointer;
}
</style>
